<template>
    <div style="margin: 10px;overflow: hidden">
        <Row>
            <Col span="6">
                <Card>
                    <ButtonGroup>
                        <Button @click="toAddTreeVue()">增加</Button>
                        <Button @click="toRegTreeVue()">修改</Button>
                        <Button @click="deleteTree()">删除</Button>
                    </ButtonGroup>
                    <Tree :data="roleTreeDate" @on-select-change="onSelectChange"></Tree>
                </Card>
            </Col>
            <Col span="17" offset="1">
                <Card>
                    <p slot="title">
                        查询 - {{parentTreeName}}
                    </p>
                    <div class="search-con search-con-top">
                        <Select clearable v-model="searchKey" class="search-col" style="width: 100px;">
                            <Option v-for="item in columns" :value="item.key" :key="`search-col-${item.key}`">
                                {{ item.title }}
                            </Option>
                        </Select>
                        <Input clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" search/>
                        <Button @click="handleSearch" class="search-btn" type="primary">
                            <Icon type="search"/>&nbsp;&nbsp;搜索
                        </Button>
                    </div>
                </Card>
                <Card style="margin-top: 10px;">
                    <ButtonGroup>
                        <Button @click="toAddTreeButtonVue()">增加按钮</Button>
                        <Button @click="toRegTreeButtonVue()">修改按钮</Button>
                        <Button @click="deleteTreeButton()">删除按钮</Button>
                    </ButtonGroup>
                    <Table ref="treeButtonTable" style="margin-top: 10px;" :data="treeButtonData"
                           :columns="treeButtonColumns" :highlight-row="true" :loading="loading"
                           @on-select="operationTreeButtonSelect" @on-select-cancel="operationTreeButtonSelect"
                           @on-select-all="operationTreeButtonSelect" @on-selection-change="operationTreeButtonSelect"
                           @on-sort-change="onSortChange" stripe>
                        <template slot="action" slot-scope="props">
                            <Poptip v-show="props.state=='2'" confirm title="是否启用当前按钮节点?" transfer
                                    @on-ok="operateTreeButton(props.treeId,1)">
                                <Button type="warning" size="small">禁用</Button>
                            </Poptip>
                            <Poptip v-show="props.state=='1'" confirm title="是否禁用当前按钮节点?" transfer
                                    @on-ok="operateTreeButton(props.treeId,2)">
                                <Button type="primary" size="small">启用</Button>
                            </Poptip>
                        </template>
                    </Table>
                    <Page style="margin-top: 5px;" show-elevator show-sizer show-total :total="total" :current="current"
                          :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                </Card>
            </Col>
        </Row>
        <addTree v-model="addShow" :parentTreeId="parentTreeId" :parentTreeName="parentTreeName" v-on:reloadTree="initTree"></addTree>
        <addTreeButton v-model="addButtonShow" :parentTreeId="parentTreeId" :parentTreeName="parentTreeName" v-on:reloadButtonList="handleSearch"></addTreeButton>
        <updateTree v-model="updateShow" :treeId="treeId"  v-on:reloadTree="initTree"></updateTree>
        <updateTreeButton v-model="updateButtonShow" :treeId="treeId"  v-on:reloadButtonList="handleSearch"></updateTreeButton>
    </div>
</template>
<script>
    import {getAllTreeList, deleteTree, queryTreeButtonList,operateTreeButton} from '../../../api/sys/tree/tree-api';
    import addTree from './addTree';
    import addTreeButton from './addTreeButton';
    import updateTree from './updateTree';
    import updateTreeButton from './updateTreeButton';

    export default {
        components: {
            addTree,
            updateTree,
            addTreeButton,
            updateTreeButton
        },
        data() {
            return {
                roleTreeDate: [],
                treeId: '0',
                parentTreeId: '0',
                parentTreeName: '顶层节点',
                hasChildren: false,
                addShow: false,
                addButtonShow: false,
                updateShow: false,
                updateButtonShow:false,
                columns: [{key: 'name', title: '菜单名字'}, {key: 'code', title: '菜单编码'}],
                searchKey: '',
                searchValue: '',
                total: 0,
                current: 1,
                pageSize: 10,
                key:'',
                order:'',
                selection: [],
                loading:false,
                treeButtonData: [],
                treeButtonColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '菜单名字',
                        key: 'name',
                        sortable: true
                    },
                    {
                        title: '菜单编码',
                        key: 'code',
                        sortable: true
                    },
                    {
                        title: '菜单状态',
                        key: 'state',
                        render: (h, params) => {
                            return h(
                                'div',
                                this.$refs.treeButtonTable.$scopedSlots.action({
                                    state: params.row.state,
                                    treeId: params.row.treeId
                                })
                            );
                        }
                    }
                ]
            };
        },
        methods: {
            onSortChange(sort){
                if(sort.order=='normal'){
                    this.order = '';
                }else{
                    this.key = sort.key;
                    this.order = sort.order;
                }
                this.handleSearch();
            },
            handleSearch() {
                this.loading = true;
                let searchKey = this.searchKey;
                let searchValue = this.searchValue;
                let parentTreeId = this.parentTreeId;
                let current = this.current;
                let pageSize = this.pageSize;
                let type = '2';
                let key = this.key;
                let order = this.order;
                let _this = this;
                queryTreeButtonList({
                    current,
                    pageSize,
                    searchKey,
                    searchValue,
                    parentTreeId,
                    type,
                    sort:key,
                    order
                }).then(res => {
                    _this.total = res.totalCount;
                    _this.treeButtonData = res.result;
                    _this.loading = false;
                });
            },
            changePage(current) {
                this.current = current;
                this.handleSearch();
            },
            changePageSize(pageSize) {// 改变每页记录的条数
                this.pageSize = pageSize;
                this.handleSearch();
            },
            operationTreeButtonSelect(selection) {
                this.selection = selection;
            },
            operateTreeButton(treeId, state) {
                operateTreeButton({treeId,state}).then(res=> {
                    if (res.result) {
                        this.$Message.success(res.msg);
                        // 更新按钮节点状态成功同时刷新grid
                        this.handleSearch();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                });
            },
            toAddTreeButtonVue() {
                if (this.parentTreeId == '0') {
                    this.$Message.warning('请先选择一个菜单节点，再来增加按钮节点！');
                    return false;
                }
                this.addButtonShow = true;
            },
            toRegTreeButtonVue() {
                if(this.selection==undefined||this.selection==''){
                    this.$Message.warning('请先选择一条需要修改的数据！');
                    return false;
                }else if(this.selection.length>1){
                    this.$Message.warning('每次只能修改一条数据！');
                    return false;
                }else{
                    this.treeId = this.selection[0].treeId;
                    this.updateButtonShow = true;
                }
            },
            deleteTreeButton() {
                if(this.selection.length>1 || this.selection.length==0){
                    this.$Message.warning('请先选择一条需要删除的数据！');
                    return false;
                }
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>是否删除当前你选中的字典数据？</p>',
                    onOk: () => {
                        deleteTree({treeId:this.selection[0].treeId}).then(res=>{
                            if(res.result){
                                this.$Message.success('删除数据成功！');
                                // 删除数据成功同时刷新grid
                                this.handleSearch();
                            }else{
                                this.$Message.warning('删除数据失败！');
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('您取消了当前的操作行为！');
                    }
                });
            },
            initTree() {
                const _this = this;
                getAllTreeList({}).then(res => {
                    _this.roleTreeDate = res.entity;
                });
            },
            onSelectChange(data) {
                // 如果长度为0说明当前没有任何节点被选中
                if (data.length == 0) {
                    this.parentTreeId = '0';
                    this.parentTreeName = '顶层节点';
                    this.hasChildren = false;
                } else {
                    this.parentTreeId = data[0].treeId;
                    this.parentTreeName = data[0].title;
                    if (data[0].children.length == 0) {
                        this.hasChildren = false;
                    } else {
                        this.hasChildren = true;
                    }
                }
            },
            toAddTreeVue() {// 跳转到增加菜单节点页面
                this.addShow = true;
            },
            toRegTreeVue() {// 跳转到修改菜单节点页面
                if (this.parentTreeId == '0') {
                    this.$Message.warning('请先选择一条需要修改的菜单节点！');
                    return false;
                }
                this.updateShow = true;
            },
            deleteTree() {// 删除菜单节点
                if (this.parentTreeId == '0') {
                    this.$Message.warning('请先选择一条需要删除的菜单节点！');
                    return false;
                }
                if (this.hasChildren) {
                    this.$Message.warning('请先删除子菜单节点以后再来删除当前节点！');
                    return false;
                }
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>是否删除当前你选中的菜单节点？</p>',
                    onOk: () => {
                        deleteTree({treeId: this.parentTreeId}).then(res => {
                            if (res.result) {
                                // 删除的时候也需要把选中的数据置空，否则新增的时候若是没选择具体的节点，他会默认该节点的数据
                                this.parentTreeId = '0';
                                this.parentTreeName = '顶层节点';
                                this.hasChildren = false;
                                this.$Message.success('删除菜单数据成功！');
                                this.initTree();
                            } else {
                                this.$Message.warning('删除菜单数据失败！');
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('您取消了当前的操作行为！');
                    }
                });
            }
        },
        mounted() {
            // 初始化完成以后加载菜单数据
            this.initTree();
        },
        watch: {
            parentTreeName(val) {
                this.selection = [];
                this.handleSearch();
            }
        }
    };
</script>
<style lang="less">
    @import './index.less';
</style>